import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
} from 'react-native';

import {Button, Icon} from 'react-native-elements';
import {screenRect} from '../../util/screen';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ListItem, Avatar} from 'react-native-elements';
import AccountAPI from '../../api/account';
import router from '../../util/router';
import BSafeAreaViewPlugs from '../../baseUI/b-safe-area-view-plus/index'
import BNavigationBar from '../../baseUI/b-navigation-bar/index'
import authUtil from '../../util/auth';

export default class Setting extends React.Component {
  state = {
    userInfo: {},
  };

  componentDidMount() {
    AccountAPI.getUserInfo().then((res) => {
      this.setState({
        userInfo: res.data,
      });
    });
  }

  render() {
    const {navigation} = this.props;
    const list = [
      {
        name: '关于我们',
        onClick: () => {
          router.goAboutUs({navigation});
        },
      },
      {
        name: '联系我们',
        onClick: () => {
          alert('发送邮件到:1056834607@qq.com')
        }
      },
      {
        name: '清除缓存',
        onClick: () => {
          alert('清除成功')
        }
      },
      {
        name: '退出登录',
        onClick: async () => {
          await authUtil.logout()
          navigation.navigate('Home')
        },
      },
    ];

    return (
      <BSafeAreaViewPlugs>
        <BNavigationBar title="系统设置" {...this.props}></BNavigationBar>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View>
            <View style={{padding: 10}}>
              <View
                style={{
                  padding: 10,
                  borderRadius: 8,
                  backgroundColor: '#fff',
                }}>
                {list.map((l, i) => (
                  <ListItem
                    key={i}
                    onPress={() => {
                      l.onClick && l.onClick();
                    }}>
                    <ListItem.Content>
                      <ListItem.Title>{l.name}</ListItem.Title>
                    </ListItem.Content>
                    <ListItem.Chevron />
                  </ListItem>
                ))}
              </View>
            </View>
          </View>
        </ScrollView>
      </BSafeAreaViewPlugs>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    position: 'relative',
    backgroundColor: Colors.lighter,
    height: screenRect.height,
  },
  menu: {
    marginTop: 10,
  },
  menu_item: {
    display: 'flex',
    alignItems: 'center',
    height: 48,
    textAlign: 'center',
    justifyContent: 'center',
  },
  links: {
    paddingHorizontal: 12,
    borderRadius: 6,
  },
  flex: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  flex_row: {
    flexDirection: 'row',
  },
  flex_column: {
    flexDirection: 'column',
  },
  flex_auto: {
    flex: 1,
  },
  lh_sm: {
    lineHeight: 18,
  },
});
